<script setup>
import publicPage from '../publicPage.vue'
import EchartsPower from '../echarts/EchartsPower.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { DemoOne } from '@/stores/index'
const visible = DemoOne()
// 表格数据
const tableData = [
  {
    id: '001',
    time: '2024-05-03',
    name: '烟雾传感器',
    state: '着火'
  }, {
    id: '001',
    time: '2024-05-03',
    name: '烟雾传感器',
    state: '着火'
  }, {
    id: '001',
    time: '2024-05-03',
    name: '烟雾传感器',
    state: '着火'
  }, {
    id: '001',
    time: '2024-05-03',
    name: '烟雾传感器',
    state: '着火'
  }, {
    id: '001',
    time: '2024-05-03',
    name: '烟雾传感器',
    state: '着火'
  }, {
    id: '001',
    time: '2024-05-03',
    name: '烟雾传感器',
    state: '着火'
  }, {
    id: '001',
    time: '2024-05-03',
    name: '烟雾传感器',
    state: '着火'
  }, {
    id: '001',
    time: '2024-05-03',
    name: '烟雾传感器',
    state: '着火'
  }, {
    id: '001',
    time: '2024-05-03',
    name: '烟雾传感器',
    state: '着火'
  }, {
    id: '001',
    time: '2024-05-03',
    name: '烟雾传感器',
    state: '着火'
  }, {
    id: '001',
    time: '2024-05-03',
    name: '烟雾传感器',
    state: '着火'
  }
]

// DOM 引用
const tableBody = ref(null)

// 滚动逻辑
let offset = 0
let scrollInterval = null

const startScroll = () => {
  scrollInterval = setInterval(() => {
    if (tableBody.value) {
      offset -= 1 // 每次向上移动一行的高度
      tableBody.value.style.transform = `translateY(${offset}px)`
      if (Math.abs(offset) >= tableBody.value.offsetHeight) {
        offset = 0 // 重置位置
      }
    }
  }, 100)
}

// 生命周期钩子
onMounted(() => {
  startScroll()
})

onUnmounted(() => {
  clearInterval(scrollInterval) // 清除定时器
})
</script>

<template>
  <transition name="right">
    <div v-if="visible.vuepage" id="gardenright">
      <div class="parcel_BOX">
        <div class="equipment_box">
          <publicPage>
            <h4>园区设备管理</h4>
          </publicPage>
          <div class="powerEcharta">
            <EchartsPower></EchartsPower>
          </div>
          <div class="powerImg"></div>
        </div>
        <div class="warning_box">
          <publicPage>
            <h4>实时警告</h4>
          </publicPage>
          <div class="tablebox">
            <table>
              <thead>
                <tr>
                  <th>告警时间</th>
                  <th>告警设备</th>
                  <th>告警内容</th>
                </tr>
              </thead>
              <tbody ref="tableBody">
                <tr v-for="item in tableData" :key="item.id">
                  <td>{{ item.time }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.state }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<style lang="scss" scoped>
#gardenright {
  position: absolute;
  right: vw(20px);
  top: vh(84px);
  width: vw(470px);
  height: vh(973px);
  background-color: rgba(3, 19, 60, 0.5);
  z-index: 1;
  color: #fff;
  display: flex;
  justify-content: center;

  h4 {
    margin-left: vw(30px);
    font-size: vw(16px);
    font-weight: 400;
  }

  .parcel_BOX {
    position: relative;
    top: vh(16px);
    width: vw(429px);
    height: vh(957px);

    .equipment_box {
      margin-bot烟雾传感器: vh(30px);
      // width: 100%;
      height: vh(519px);

      .powerEcharta {
        width: vw(190px);
        height: vh(194px);
        margin-left: vw(120px);
        background: url('../../assets/img/power.png') no-repeat center/50% 50%;
      }

      .powerImg {
        width: vw(303px);
        height: vh(253px);
        margin-left: vw(62px);
        background: url('../../assets/img/equipment.png') no-repeat center/100% 100%;
      }
    }

    .warning_box {
      height: vh(408px);

      .tablebox {
        height: vh(350px);
        margin-top: vh(20px);
        overflow: auto;

        table {
          width: 100%;
          border: none;
          border-collapse: collapse;

          thead {
            font-size: vw(16px);
            color: #48ece7;
            background-color: #132239;
            position: sticky;
            /* 固定表头 */
            top: 0;
            /* 表头距离顶部的距离 */
            z-index: 1;
          }

          tbody {
            font-size: vw(14px);
          }

          tr {
            height: vh(42px);
            text-align: center;
            transition: transform 0.5s ease-in-out;
            /* 平滑滚动动画 */

            &:nth-child(2n) {
              background-color: rgba(13, 24, 57, .7);
            }
          }

        }

        &::-webkit-scrollbar {
          width: 0px;
          background-color: #132239;
          /* 滚动条背景色 */
        }

        &::-webkit-scrollbar-thumb {
          background-color: #48ece7;
          /* 滚动条滑块颜色 */
          border-radius: 0px;
        }
      }
    }
  }
}

/* 淡入淡出加滑动效果 */
.right-enter-active,
.right-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.right-enter-from {
  opacity: 0;
  transform: translateX(100px);
}

.right-leave-to {
  opacity: 0;
  transform: translateX(100px);
}
</style>